<template>
  <div>
    <el-form label-position="left" ref="form" :rules="rules" :model="formData" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item class="half-item" label="标题:" prop="title">
            <el-input v-model="formData.courseTitle"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
        <span class="styleText">正文内容：</span>
        </el-col>
        <el-col :span="6" style="float: right">
        <el-form-item label="分类:" style="float: right;" prop="classify">
          <el-select v-model="formData.courseType" placeholder="请选择">
            <el-option
              v-for="item in typeOptions"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        </el-col>
      </el-row>
      <vue-ueditor ueditorPath="//cdn.cd121.com/ueditor/1.4.3.3/"
                   @ready="editorReadyHandler"
                   :ueditorConfig="editorConfig"/>
    </el-form>
    <div class="btn-group-wrapper top">
      <el-button type="primary" icon="plus" @click="releaseHandler">发布</el-button>
      <el-button type="primary" icon="delete" @click="draftHandler">草稿</el-button>
    </div>
  </div>
</template>
<script>
  import { mapActions, mapGetters } from 'vuex'
  import VueUeditor from 'vue-ueditor';
  import { forLessonAdd as editorConfig } from '../../common/editor.config'
  import moduleStore from './bll/store'
  import store from '../../store'
  import assignDeep from 'assign-deep';
  import stringUtil from '../../common/stringUtil';
  (!store.state.sysFundLesson) && store.registerModule('sysFundLesson', moduleStore)
  export default{
    data() {
      return {
        rules: {
          courseTitle: [
            {required: true, message: '请输入标题', trigger: 'blur'}
          ]
        },
        typeOptions: [
          {
            value: 0,
            label: '基金学堂-无'
          },
          {
            value: 1,
            label: '基金学堂-基金基础知识'
          },
          {
            value: 2,
            label: '基金学堂-交易相关问题'
          },
          {
            value: 3,
            label: '系统消息'
          }
        ],
        formData: {
          courseContent: '',
          courseTitle: '',
          courseType: 0
        },
        editorConfig: editorConfig,
        editor: null
      }
    },
    components: {VueUeditor},
    mounted() {
      let pageModel = this.getLessonPageModel;
      if (pageModel === 'UPDATE') {
        this.formData = assignDeep({}, this.getEditingLesson);
      } else {
      }
    },
    computed: {
      ...mapGetters(['getLessonPageModel', 'getEditingLesson'])
    },
    methods: {
      ...mapActions(['releaseLesson', 'updateLesson']),
      editorReadyHandler(editorInstance) {
        this.editor = editorInstance;
        if (this.getLessonPageModel === 'UPDATE') {
          this.editor.setContent(this.formData.courseContent);
        }
      },
      getEditorContentHandler() {
        if (this.editor) {
          this.formData.courseContent = this.editor.getContent();
        }
      },
      resetHandler() {
        this.$refs.form.resetFields();
      },
      releaseHandler() {
        let self = this;
        let data = {};
        let formData = this.formData;
        this.getEditorContentHandler();
        this.$refs.form.validate((valid) => {
          if (stringUtil.isEmpty(formData.courseContent)) {
            valid = false;
          }
          if (valid) {
            data.courseTitle = formData.courseTitle
            data.courseType = formData.courseType
            data.courseContent = formData.courseContent
            self.getLessonPageModel === 'UPDATE' && (data.courseId = formData.courseId);
            //继续添加 或 返回列表
            self[self.getLessonPageModel === 'ADD' ? 'releaseLesson' : 'updateLesson'](data).then(() => {
              //self.disable();
              if (self.getLessonPageModel === 'ADD') {
                self.resetHandler();
                self.$message.success('添加课堂成功!');
              } else {
                self.$message.success('修改课堂成功!');
              }
              setTimeout(function () {
                self.$router.push('/fundlesson/index');
              }, 1000);
            })
          } else {
            this.$message({
              showClose: true,
              message: '请检查是否有未填项。',
              type: 'error'
            });

            return false;
          }
        });
      },
      draftHandler() {
        this.$message.warning('草稿功能暂未开放')
        //this.getEditorContentHandler();
        //TODO 如果是修改的状态下，保存为草稿的逻辑
      }
    }
  }
</script>
<style>
  .styleText {
    font-size: 14px;
    color: #48576a;
    line-height: 36px;
  }

  .block-label:before, .block-label:after {
    content: '';
    display: table;
  }

  .block-label:after {
    clear: both;
  }
</style>


